<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check Spinner With Pop Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<svg class="spinner" viewBox="0 0 48 48" role="img"
     aria-label="A partial ring that rotates and then is shaped as a checkmark, which pops out yielding confetti">
    <g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-width="4">
        <circle class="spinner__worm" cx="24" cy="24" r="22" stroke-dasharray="138.23 138.23" stroke-dashoffset="-51.84"
                transform="rotate(-119)"/>
        <circle class="spinner__pop-end" stroke="var(--light-green)" cx="24" cy="24" r="18" opacity="0"/>
        <g fill="currentcolor" stroke="none">
            <circle class="spinner__pop-start" fill="var(--light-green)" cx="24" cy="24" r="20" opacity="0"/>
            <g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--periwinkle)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(51.43,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--orange)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--magenta)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(102.86,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-green)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-teal)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(154.29,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--purple)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--magenta)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(205.71,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-teal)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(257.14,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--periwinkle)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
            <g transform="rotate(308.57,24,24)">
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--purple)" cx="22" cy="5" r="1.5"/>
                </g>
                <g class="spinner__pop-dot-group" opacity="0">
                    <circle class="spinner__pop-dot" fill="var(--light-teal)" cx="26" cy="2" r="1.5"/>
                </g>
            </g>
        </g>
        <path class="spinner__check" d="M 17 25 L 22 30 C 22 30 32.2 19.8 37.3 14.7 C 41.8 10.2 39 7.9 39 7.9"
              stroke-dasharray="36.7 36.7" stroke-dashoffset="-36.7"/>
    </g>
</svg>
<!-- partial -->

</body>
</html>
